<template>
  <div v-if="!isEmpty" style="overflow: auto">
    <template v-if="hasNumbers">
      <template v-for="(part, index) in textParts" :key="index">
        <el-input
          style="width: 50px"
          v-if="part.type === 'number' && !disabled"
          v-model="part.value"
          @input="updateCombinedText"
        />
        <span v-else>{{ part.value }}</span>
      </template>
    </template>
    <span v-else>{{ text }}</span>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted } from 'vue'

const props = defineProps({
  text: {
    type: String,
    required: true
  },
  disabled: {
    type: Boolean,
    default: false
  }
})

const numberRegex = /\d+/g

const textParts = ref([])
const combinedText = ref('')

const isEmpty = computed(() => !props.text || props.text.trim() === '')
const hasNumbers = computed(() => numberRegex.test(props.text))

const processText = (text) => {
  if (!isEmpty.value && hasNumbers.value) {
    return text.split(numberRegex).reduce((acc, part, index, array) => {
      if (part !== '') {
        acc.push({ type: 'text', value: part })
      }
      if (index < array.length - 1) {
        const number = text.match(numberRegex)[index]
        acc.push({ type: 'number', value: number })
      }
      return acc
    }, [])
  } else {
    return [{ type: 'text', value: text }]
  }
}

const updateCombinedText = () => {
  combinedText.value = hasNumbers.value
    ? textParts.value.map(part => part.value).join('')
    : props.text
}

watch(() => props.text, (newText) => {
  textParts.value = processText(newText)
  updateCombinedText()
}, { immediate: true })

onMounted(() => {
  textParts.value = processText(props.text)
  updateCombinedText()
})
</script>

<style scoped>
.editable-text {
  font-size: 18px;
  line-height: 1.5;
  margin-bottom: 10px;
}

.number-input {
  width: 50px;
  font-size: inherit;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 2px 4px;
}

.non-editable {
  color: #333;
}

.result {
  font-weight: bold;
  margin-top: 10px;
}

.empty-message {
  font-style: italic;
  color: #888;
}
</style>

